<template>
  <el-dialog :visible="dialogVisible" title="添加课时"  @close="close()">
    <el-form :model="video" label-width="120px">
      <el-form-item label="课时标题：">
        <el-input v-model="video.title" clearable/>
      </el-form-item>
      <el-form-item label="课时排序：">
        <el-input-number v-model="video.sort" :min="0"/>
      </el-form-item>
      <el-form-item label="是否免费：">
        <el-radio-group v-model="video.free">
        <el-radio :label="true">免费</el-radio>
        <el-radio :label="false">默认</el-radio>
      </el-radio-group>
      </el-form-item>
      <el-form-item label="上传视频：">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :before-remove="handleBeforeRemove"
          :on-remove="handleOnRemove"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :on-exceed="handleUploadExceed"
          :file-list="videoList"
          :limit="1"
          :action="BASE_API+'/admin/video/media/upload'">
          <el-button slot="trigger" size="small" type="primary">选择视频</el-button>
          <el-button
              :disabled="uploadBtnDisabled"
              type="success"
              size="small"
              style="margin-left: 10px;"
              @click="submitUpload()"
          >
          上传
          </el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import videoApi from "@/api/video";
export default {
  name: "Form",
  data() {
    return {
      dialogVisible: false,
      BASE_API: process.env.BASE_API,
      video: {
        sort: '0'
      },
      videoList: [],
      uploadBtnDisabled: false
    }
  },
  methods: {
    saveOrUpdate() {
      if (!this.video.id) {
         this.save()
      }else {
        this.update()
      }
    },
    save() {
      this.video.courseId = this.$parent.$parent.courseId
      videoApi.save(this.video).then(res => {
        this.$message.success(res.message)
        this.dialogVisible = false
        this.$parent.fetchData()
      })
    },
    update() {
      this.video.courseId = this.$parent.$parent.courseId
      videoApi.updateById(this.video).then(res => {
        this.$message.success(res.message)
        this.close()
      })
    },
    //删除视频之前的操作
    handleBeforeRemove(file, fileList) {
      this.$confirm(`确定删除${file.name}?`)
    },
    //执行删除的文件
    handleOnRemove() {
      if (!this.video.videoSourceId) {
        return
      }
      vodApi.removeByVodId(this.video.videoSourceId).then(response => {
        this.video.videoSourceId = ''
        this.video.videoOriginalName = ''
        videoApi.updateById(this.video)
        this.$message.success(response.message)
      })
    },
    //上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning('想要重新上传视频，请先删除已上传的视频')
    },
    //上传
    submitUpload() {
      this.uploadBtnDisabled = true
      this.$refs.upload.submit()
    },
    // 视频上传成功的回调
    handleUploadSuccess(response, file, fileList) {
      this.uploadBtnDisabled = false
      if (response.success) {
        this.video.videoSourceId = response.data.video_source_Id
        this.video.videoOriginalName = file.name
        this.$message.success(response.message)
      } else {
        this.$message.error('上传失败1')
      }
    },
// 失败回调
    handleUploadError() {
      this.uploadBtnDisabled = false
      this.$message.error('上传失败2')
    },
    open(chapterId,videoId) {
      this.dialogVisible = true
      this.video.chapterId = chapterId
      if(videoId != null) {
        videoApi.getById(videoId).then(res => {
          this.video = res.data.item
          if (this.video.videoOriginalName) {
            this.videoList = [{ 'name': this.video.videoOriginalName }]
          }
        })
      }
    },
    close() {
      this.dialogVisible = false
      this.$parent.fetchData()
      this.video = {
        sort: '0'
      }
      this.videoList = [] //重置视频上传列表
    },
  }

}
</script>

<style scoped>

</style>
